<template>
  <div class="rightpanel flexcolumn w-full h_full p_relative pt-12 bg_fff">
    <el-form ref="form" :model="form" label-width="0" class="pl-20 pr-20">
      <el-form-item label="" class="f-14 fw-6 mb-5">
        <el-radio-group v-model="form.type">
          <el-radio :label="1" class="mr-15">当前聊天</el-radio>
          <el-radio :label="2">所有聊天</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="" prop="keyword">
        <el-input
          v-model="form.keyword"
          placeholder="输入需要搜索的关键词"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="wxid" v-if="form.type == 2">
        <div class="flex">
          <el-input value="企微号" size="small" style="width: 65px"></el-input>
          <el-select
            size="small"
            v-model="form.wxid"
            placeholder="请选择企微号"
            style="width: 195px"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="" prop="wxid2" v-if="form.type == 2">
        <div class="flex">
          <el-select size="small" v-model="form.nametype" style="width: 65px">
            <el-option label="全部" :value="1"></el-option>
            <el-option label="好友" :value="2"></el-option>
            <el-option label="群聊" :value="3"></el-option>
          </el-select>
          <el-select
            size="small"
            v-model="form.wxid2"
            placeholder="请搜索并选择对象"
            style="width: 195px"
          >
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="" prop="starttime" v-if="form.type == 2">
        <div class="flex">
          <el-input value="开始" size="small" style="width: 65px"></el-input>
          <el-date-picker
            v-model="form.starttime"
            type="datetime"
            size="small"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            style="width: 195px"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="" prop="endtime" v-if="form.type == 2">
        <div class="flex">
          <el-input value="结束" size="small"  style="width: 65px"></el-input>
          <el-date-picker
            v-model="form.endtime"
            type="datetime"
            size="small"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            style="width: 195px"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="">
        <div class="flex">
          <el-button
            v-if="form.type == 2"
            size="small"
            plain
            class="flex1"
            @click="resetQuery"
            >清空全部</el-button
          >
          <el-button
            size="small"
            type="primary"
            plain
            class="flex1"
            @click="handleQuery"
            >搜索</el-button
          >
        </div>
      </el-form-item>
    </el-form>
    <div class="listbody">
      <div v-if="!list.length" class="f-14 c_text2 flexcenter mt-20">
        暂无数据
      </div>
      <template v-else>
        <div class="listtotal f-13 c_text2 pl-20">
          为您搜索到
          <span class="c_primary pl-2 pr-2"> {{ list.length }} </span>条结果
        </div>
        <div class="listwarp p_relative">
          <div class="messitem flex" v-for="(item, index) in list" :key="index">
            <img
              src="https://wework.qpic.cn/wwpic/177031_HhrnVYv6QQSgQ2C_1686909054/0"
              alt=""
              class="avatar mr-15"
            />
            <div class="flexcolumn messright mt-2">
              <div class="flexbetween mb-10">
                <div class="msgname f-13 c_primary textover">民鱼尾</div>
                <div class="msgtime f-13 textover">2023-12-24 14:21:44</div>
              </div>
              <div class="msgcontent f-15 flex">
                【系统消息】您好，为了保证服务质量，我们已经结束了对话，期待再次为您服务。
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>

    <el-dialog
      title="自定义排序"
      :visible.sync="open"
      width="480px"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="handleSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        type: 1,
        keyword: "",
        wxid:'',
        nametype: 1,
        wxid2:'',
        starttime: '',
        endtime:''
      },
      loading: false,
      list: [{id:1}],
      open: false,
    };
  },
  created() {
    console.log("------------ChatRight---------");
    console.log("useritem:", this.useritem);
    this.form.starttime = this.parseTime(new Date().setHours(0, 0, 0, 0))
    this.form.endtime = this.parseTime(new Date().setHours(23, 59, 59, 59))
    this.getList();
  },
  props: {
    useritem: {
      type: Object,
      default: null,
    },
  },
  methods: {
    getList() {
      console.log("获取内容");
    },

    handleQuery() {
      if (!this.form.keyword) {
        this.$message.warning("搜索关键词不能为空");
        return;
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("form");
      this.form.starttime = this.parseTime(new Date().setHours(0, 0, 0, 0))
      this.form.endtime = this.parseTime(new Date().setHours(23, 59, 59, 59))
      this.form.nametype = 1
    },

    handleOpen() {
      this.treeList = [...this.tabList];
      this.open = true;
    },

    handleClose() {
      this.open = false;
    },

    handleSubmit() {
      this.tabList = [...this.treeList];
      this.handleClose();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-radio__label {
  font-weight: bold;
}
.el-form-item {
  margin-bottom: 10px;
}
.listtotal {
  border-top: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  height: 40px;
  line-height: 40px;
}
.listwarp {
  padding-top: 10px;
  height: calc(100% - 50px);
  overflow-y: auto;
}
.listbody {
  height: 0;
  flex: 1 1;
}
.messitem {
  padding: 10px 20px;
  border-bottom: 1px solid #e9e9e9;
  &:hover {
    background-color: #f6f6f6;
  }

  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 4px;
  }
  .messright {
    flex: 1;
  }
  .msgname {
    max-width: 220px;
    color: #3876e8;
  }
  .msgtime {
    color: #6d9aeb;
  }
  .msgcontent {
    word-break: break-all;
    color: #000;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    padding: 6px 12px;
  }
}
::v-deep .el-input__inner {
  padding: 0 12px;
}
::v-deep .el-date-editor {
  .el-input__inner{
    padding-left: 30px;
  }
}
</style>